<template>
	<uni-popup ref="popup" :is-mask-click="false">
		<view class="relative flex-col" style="width:calc(100vw - 50px);">
			<image class="w-32 h-32 mb-12" style="align-self:flex-end;" src="@/static/svg/icon-close.svg" @click="onClose"></image>
			<view v-if="orderDetail" class="radius-12 bg-white pb-24 flex-col item-center">
				<image class="" style="margin-top:-78px;width:157px;height:157px;" src="./handclap.png"></image>
				<view class="flex center text-color-regular text-bold fs-24" style="margin-top:-20px">恭喜您报名成功</view>
				<view v-if="orderDetail.remainStock !== 0" class="mt-4">{{orderDetail.title}}</view>
				<view class="w-full mt-20">
					<view v-if="orderDetail.remainStock !== 0" class="mx-50 flex center bg-primary h-46 radius-8 text-white fs-16" @click="toInvite">邀请好友</view>
					<view v-else class="mx-50 flex center bg-primary h-46 radius-8 text-white fs-16" @click="toOrderDetail">查看订单</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

/**
 * 
规则：
1、固定人数活动：
报名成功，未满员，支付完成后提示：还差x人即可开启活动；
报名成功，即满员，支付完成后，提示：恭喜您报名成功；

2、阶梯人数活动：
报名成功，未满第一档人数，支付完成后提示：还差x人即可开启活动；
报名成功，满第一档人数，支付完成后提示：再邀x人，可返y元（对比第二档人数，逐级判断）；
报名成功，即满员，支付完成后提示：恭喜您报名成功；
 */
<script setup>
	import { ref } from 'vue'
	import { orderEnrollActiveDetailApi } from '@/api/order.js'
	
	const orderId = ref('')
	const orderDetail = ref(null)
	
	const popup = ref(null)
	
	const onClose = () => {
		popup.value && popup.value.close()
	}
	
	const showDialog = (data) => {
		// popup.value && popup.value.open()
		orderId.value = data && data.orderId
		getOrderDetail()
	}
	
	const getOrderDetail = () => {
		orderEnrollActiveDetailApi({
			id: orderId.value
		}).then(res => {
			orderDetail.value = res
			popup.value && popup.value.open()
		})
	}
	
	// TODO 邀请好友
	const toInvite = () => {
		
		onClose()
	}
	
	// 查看订单
	const toOrderDetail = () => {
		uni.navigateTo({
			url: `/pagesA/order/order-detail?id=${orderId.value}`
		})
		onClose()
	}
	
	defineExpose({
		showDialog
	})
</script>
